<template>
  <div class="zl-progress">
    <div class="zl-progress-pos-number">
      <div class="zl-progress-numbers flex-wrap">
        <span class="zl-progress-numbers-left">{{ progressVal }}</span>
        <span class="zl-progress-numbers-right">%</span>
      </div>
      <div class="text-1">
        正确率
      </div>
    </div>
    <svg width="264" height="132">
      <!-- 背景底色 -->
      <path
        d="M20,122 A112,112 0 0,1 244,122"
        fill="none"
        stroke="#d6e6ff"
        stroke-width="7.1"
        stroke-linecap="round"
        stroke-dasharray="365,10000"
      ></path>

      <!-- 进度色 -->
      <path
        d="M20,122 A112,112 0 0,1 244,122"
        fill="none"
        stroke="#3480ff"
        stroke-width="12"
        stroke-linecap="round"
        :stroke-dasharray="`${value2},10000`"
      ></path>

      <!-- 进度结尾的白色背景 -->
      <path
        d="M20,122 A112,112 0 0,1 244,122"
        fill="none"
        stroke="white"
        stroke-width="19.2"
        stroke-linecap="round"
        stroke-dasharray="0,1000"
        :transform="`rotate(${value1},132,122)`"
        class="process-bg-point"
      ></path>

      <!-- 进度结尾的蓝色背景 -->
      <path
        d="M20,122 A112,112 0 0,1 244,122"
        fill="none"
        stroke="#3480ff"
        stroke-width="12"
        stroke-linecap="round"
        stroke-dasharray="0,1000"
        :transform="`rotate(${value1},132,122)`"
        filter="url(#shadow)"
      ></path>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      progressVal: 0 // 页面实际显示的进度
    }
  },
  computed: {
    // 进度
    value1() {
      let result = (this.progressVal / 100) * 180
      if (result < 0) {
        return 0
      }

      if (result > 180) {
        return 180
      }
      return result
    },

    // 进度条的长度
    value2() {
      if (this.progressVal < 0) {
        return 0
      }

      if (this.progressVal > 100) {
        return 365
      }
      let result = (this.progressVal / 100) * 365
      result = result - (result / 375) * 19.2
      return result
    }
  },
  watch: {
    progress() {
      if (typeof window === 'undefined') return
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    drowProgress() {
      window.requestAnimationFrame(() => {
        if (this.progressVal >= this.progress) return
        this.progressVal++
        this.drowProgress()
      })
    },
    init() {
      this.progressVal = 0
      this.drowProgress()
    }
  }
}
</script>

<style scoped>
.zl-progress {
  position: relative;
  margin: 0 auto 5px;
  width: 264px;
  height: 132px;
}
.zl-progress-pos-number {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.process-bg-point {
  filter: drop-shadow(0 0 2px rgb(161, 194, 252));
}

.zl-progress-numbers-left {
  font-size: 24px;
  font-weight: 500;
  color: #262626;
  line-height: 33px;
}

.zl-progress-numbers-right {
  margin-left: 2px;
  height: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #262626;
  line-height: 16px;
  position: relative;
  top: 12px;
}
.text-1 {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #8c8c8c;
  line-height: 20px;
}
</style>
